<template>

  <div class="shoping" >
          <!-- {{this.$store.state.title}}
          {{this.$store.state.price}} -->
          <!-- {{projectTitle}}
          {{priceAlias}}
          {{countPlusLocalState}} -->
          {{projectTile}}
          {{projectPrice}}
          <h3 @click='changeTile'>{{projectTile}}</h3>
         <div v-for="(item,index) in products" :item='item' :key='index'>
            <!-- <router-link :to="`/list?id=${item.id}&name=${item.name}`"> -->
            <router-link :to="{
                name:'detail',
                params:{
                    id:item.id,
                    name:item.name,
                    price:item.price,
                    img:item.img,
                    num:item.num
                }
            }">
                <div class="ym">
                    <img :src="item.img" alt="">
                    <h4>{{item.name}}</h4><br>
                    <div class="a"><span class="count">{{item.price}}</span><span>---{{item.num}}</span></div>
                </div>
            </router-link>
         </div>

     </div>

     
 
</template>

<script>

import {methods,data} from '../mixin/MixIn'

import {mapState} from 'vuex'

export default {
  name: 'Recod',
  data(){
      return {
          products:[],
          num:1,
          demo:'demo'
      }
  },
  beforeDestroy:function(){
      console.log('advlist销毁了');
  },
  created:function(){
      console.log('record created');
      // Vuex 会把 状态（数据）加入到实例中
      console.log(this);
      console.log(this.$store.state.title)
  },
  mixins:[methods,data],

//   computed:{
//       projectTitle () {
//           return this.$store.state.title
//       }
//   }
//    computed: mapState({//可以省去 this.$store
//     // 箭头函数可使代码更简练
//     projectTitle: state => state.title,

//     // // 传字符串参数 'count' 等同于 `state => state.count`
//      priceAlias: 'price',//price 不就是 main.js  state 下的属性名

//     // // 为了能够使用 `this` 获取局部状态，必须使用常规函数
//     countPlusLocalState (state) {
//       return state.title;
//     }
//   })
    // 对象展开的写法
   computed:{
       //...mapState(['title','price']) 最常用的写法
       // 取别名方式
       ...mapState({
            projectTile:'title',
            projectPrice:'price'
       })

   },
   methods:{
       changeTile:function(){
           this.$store.commit('changeTile','大数据分析');
       }
   }
 
}
</script>
<style scoped>
 .shoping {
     margin:0 5%;
    padding: 0 0.5rem;
    width: 100%;
 }
 .ym {
     width: 420px;
     height: 285px;
     background-color: #fff;
     margin-bottom: 20px;
     border-radius: 6px;
 }
 img {
     border-radius: 6px 6px 0px 0px;
     width: 420px;
 }
 .count {
     color: #E04F9F;
 }
 h4 {
     margin: 12px 40px -8px 20px;
 }
.a {
    margin-left: 20px;
    color: #7C7F92;
    font-size: 15px;
    padding-bottom: 10px;
    margin-bottom: 10px;
 }
</style>
